<template>
    <div>
        <!-- 查询表单  姓名  手机号 -->
        <el-form
        ref="queryForm"
        :model="queryForm"
        :rules="queryFormRules"
        inline
        size="mini"
        label-width="80px">

        <!-- 手机号 -->
        <el-form-item label="手机号" prop="phone">
            <el-input
                v-model="queryForm.phone"
                placeholder="请输入手机号"
                @keyup.enter.native="getCasesByUser">
            </el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="idCard">
            <el-input
                v-model="queryForm.idCard"
                placeholder="请输入身份证号"
                @keyup.enter.native="getCasesByUser">
            </el-input>
        </el-form-item>
        <el-form-item>
            <el-button
                type="primary"
                plain
                icon="el-icon-search"
                @click="getCasesByUser"
            >查询</el-button>
            <el-button
                type="success"
                plain
                icon="el-icon-refresh"
                @click="resetQueryForm"
            >重置</el-button>
            <el-button
                :disabled="userid==''"
                type="primary"
                plain
                size="mini"
                icon="el-icon-plus"
                @click="handleAdd"
            >添加</el-button>
        </el-form-item>
        </el-form>

        <el-card v-for="item in cases" :key="item.id">
            <el-descriptions class="margin-top" :title="'第'+item.episode+'次病例信息'" 
            :column="3"  border>
            <template slot="extra">
                <el-button
                type="success"
                plain
                size="mini"
                icon="el-icon-edit"
                @click="handleEdit(item)"
                >修改</el-button>
                <el-button
                type="danger"
                plain
                size="mini"
                icon="el-icon-delete"
                @click="deleteCases(item)"
                >删除</el-button>
            </template>
            <el-descriptions-item>
                <template slot="label">
                    姓名
                </template>
                {{item.name}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    性别
                </template>
                {{item.gender==0?'女':'男'}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    病史
                </template>
                {{item.patientHistory}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    体温
                </template>
                {{item.temperature}}℃
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    呼吸频率
                </template>
                {{item.rr }}次/分钟
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    体重
                </template>
                {{item.weight}}KG
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    症状表现
                </template>
                {{item.symptoms}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    CT结果
                </template>
                {{item.ct}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    核酸结果
                </template>
                {{item.pcr}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    诊断结果
                </template>
                {{item.diagnosis}}
            </el-descriptions-item>
            <el-descriptions-item >
                <template slot="label">
                    治疗措施
                </template>
                {{item.treatment}}
            </el-descriptions-item>
            <el-descriptions-item >
                <template slot="label">
                    开具药物
                </template>
                {{item.medicals}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    治疗结果
                </template>
                {{item.outcome}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    创建时间
                </template>
                {{item.createtime}}
            </el-descriptions-item>
        </el-descriptions>
        </el-card>

        <el-dialog
        :title="title"
        :visible.sync="caseFormDialogVisible"
        :close-on-click-modal="false">
            <el-form ref="caseForm" :model="caseForm" :rules="caseFormRules"
                label-width="80px">
                <!-- <el-form-item label="姓名" prop="name">
                    <el-input v-model="caseForm.name" placeholder="请输入真实姓名"/>
                </el-form-item>
                <el-form-item label="性别" prop="gender">
                    <el-radio-group v-model="caseForm.gender">
                        <el-radio :label="0">女</el-radio>
                        <el-radio :label="1">男</el-radio>
                    </el-radio-group>
                </el-form-item> -->
                <el-row :gutter="20" v-if="cases.length==0">
                    <el-col :span="12">
                        <el-form-item label="病史" prop="patientHistory">
                            <el-input v-model="caseForm.patientHistory" placeholder="请输入病史" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12"></el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="体温" prop="temperature">
                            <el-input v-model="caseForm.temperature" placeholder="请输入体温" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <span>℃</span>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="呼吸频率" prop="rr">
                            <el-input v-model="caseForm.rr" placeholder="请输入呼吸频率"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <span>次/分钟</span>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="体重" prop="symptoms">
                            <el-input v-model="caseForm.weight" placeholder="请输入体重"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <span>KG</span>
                    </el-col>
                </el-row>
                
                <el-form-item label="症状表现" prop="symptomList">
                    <el-checkbox-group v-model="caseForm.symptomList">
                        <el-checkbox v-for="symptom in symptomListAll" :key=symptom.id
                            :label="symptom.id" >
                            {{symptom.name}}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="CT结果" prop="ct">
                    <el-select
                        v-model="caseForm.ct"
                        placeholder="请选择CT结果" >
                        <el-option label="正常" value="正常"></el-option>
                        <el-option label="异常" value="异常"></el-option>
                        <el-option label="恶化" value="恶化"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="核酸结果" prop="pcr">
                    <el-select
                        v-model="caseForm.pcr"
                        placeholder="请选择核酸结果" >
                        <el-option label="阴性" value="阴性"></el-option>
                        <el-option label="阳性" value="阳性"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="诊断结果" prop="diagnosis">
                    <el-select
                        v-model="caseForm.diagnosis"
                        placeholder="请选择诊断结果" >
                        <el-option label="无症状" value="无症状"></el-option>
                        <el-option label="阳性" value="阳性"></el-option>
                        <el-option label="轻症" value="轻症"></el-option>
                        <el-option label="普通型" value="普通型"></el-option>
                        <el-option label="重症" value="重症"></el-option>
                        <el-option label="危重症" value="危重症"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="治疗措施" prop="treatment">
                    <el-select
                        v-model="caseForm.treatment"
                        placeholder="请选择治疗措施" >
                        <el-option label="居家隔离" value="居家隔离"></el-option>
                        <el-option label="住院隔离" value="住院隔离"></el-option>
                        <el-option label="输氧治疗" value="输氧治疗"></el-option>
                        <el-option label="icu治疗" value="icu治疗"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="开具药物" prop="medicalList">
                    <el-checkbox-group v-model="caseForm.medicalList">
                        <el-checkbox v-for="medical in medicalListAll" :key=medical.id
                            :label="medical.id" >
                            {{medical.name}}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="治疗结果" prop="outcome">
                    <el-select
                        v-model="caseForm.outcome"
                        placeholder="请选择治疗结果" >
                        <el-option label="痊愈" value="痊愈"></el-option>
                        <el-option label="好转" value="好转"></el-option>
                        <el-option label="死亡" value="死亡"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="caseFormDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {getCasesByUser,addCases, deleteCases, updateCase} from "@/api/cases"
import {getAllMedical} from "@/api/medical"
import {getAllSymptom} from "@/api/symptom"
export default {
    data() {
        return {
            userid:'',
            medicalListAll:[],
            symptomListAll:[],
            cases:[],
            queryForm: {    // 查询表单参数
                phone: '',
                idCard:''
            },
            title: '添加',
            caseFormDialogVisible: false, // 控制添加或修改表单的展示
            caseForm: { // 添加或修改表单
                name:'',
                gender:'',
                patientHistory:'',
                temperature:'',
                rr:'',
                weight:'',
                symptomList:[],
                ct:'',
                pcr:'',
                diagnosis:'',
                treatment:'',
                medicalList:[],
                outcome:'',
                episode:'',
            },
            caseFormRules: { /* 校验规则 */
                // name:[{required:true,message:'请输入姓名'},
                //     {min:2,max:5,message:'姓名最少2位最多5位'}],
                // gender:[{required:true,message:'请选择性别'}],
                // password:[{required:true,message:'请输入密码'},
                //     {min:8,max:15,message:'密码最少8位最多15位'}],
                // phone:[{required:true,message:'请输入手机号'},
                //     { pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/, message: '请输入正确的手机号' }],
                // idCard:[{required:true,message:'请输入身份证号'},
                //     { pattern: /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/, message: '请输入正确的身份证号' }],
                // address:[{required:true,message:'请输入地址'}],
                // email:[{required:false,pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, message: '请输入正确的邮箱' },],
            },
            queryFormRules:{
                name:[{required:false,max:5,message:'姓名最少2位最多5位'}],
                phone:[{required:false,pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/, message: '请输入正确的手机号' }],
                idCard:[{required:false,pattern: /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/, message: '请输入正确的身份证号' }],
            },
        };
    },

    mounted() {
        this.getAllMedical()
        this.getAllSymptom()
    },

    methods: {
        getAllMedical(){
            getAllMedical().then(resp=>{
                if(resp.code == 200){
                    this.medicalListAll = []
                    this.medicalListAll = resp.data
                }else{
                    this.medicalListAll = []
                }
            })
        },
        getAllSymptom(){
            getAllSymptom().then(resp=>{
                if(resp.code == 200){
                    this.symptomListAll = []
                    this.symptomListAll = resp.data
                }else{
                    this.symptomListAll = []
                }
            })
        },
        handleAdd(){
            this.title = '添加'
            this.caseFormDialogVisible = true
            this.$nextTick(() => {
                this.caseForm = {
                    name:'',
                    gender:'',
                    patientHistory:'',
                    temperature:'',
                    rr:'',
                    weight:'',
                    symptomList:[],
                    ct:'',
                    pcr:'',
                    diagnosis:'',
                    treatment:'',
                    medicalList:[],
                    outcome:'',
                    episode:'',
                }
                if(this.cases.length!=0)
                    this.caseForm.patientHistory = this.cases[0].patientHistory
                this.caseForm.userid = this.userid
                this.$refs.caseForm.resetFields()
            })
        },
        submit() {
            this.$refs.caseForm.validate(async v => {
                if (v) { // 校验通过
                    if (!this.caseForm.id) { // 没有id就表示添加
                        this.caseForm.episode = this.cases.length+1
                        
                        const { code, message } = await addCases(this.caseForm)
                        if (code === 200) {
                            this.$message.success('添加成功')
                            this.caseFormDialogVisible = false
                            this.getCasesByUser()
                        } else {
                            this.$message.error(message)
                        }
                    } else { // 更新
                        const {code, message} = await updateCase(this.caseForm)
                        if (code === 200) {
                            this.$message.success('更新成功')
                            this.caseFormDialogVisible = false
                            this.getCasesByUser()
                        } else {
                            this.$message.error(message)
                        }
                    }
                } else {
                    return false
                }
            })
        },
        getCasesByUser(){
            getCasesByUser(this.queryForm).then(resp=>{
                this.cases = []
                if(resp.code==200){
                    this.cases = resp.data.cases
                    this.userid = resp.data.user.id
                    if(this.cases.length==0){
                        this.$message.success("该用户没有病例")
                    }
                }else{
                    this.cases = []
                    this.$message.error(resp.message)
                }
            })
        },
        deleteCases(item) {
            this.$confirm('是否删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteCases(item).then(resp => {
                    const {code, message } = resp
                    if (code == 200) {
                        this.$message.success('删除成功')
                        this.getCasesByUser()
                    } else {
                        this.$message.error(message)
                    }
                }).catch(e => {
                    console.log(e)
                })
            }).catch(() => {
                this.$message.info('已取消删除')
            });
        },

        handleEdit(item) {
            this.title = '修改'
            // 为表单赋值
            this.caseForm = { ... item }
            // this.$nextTick(() => {
            //     // 在校验处加上了trigger之后  解决点击修改显示校验错误的问题
            //     this.$refs.userForm.validate()
            // })
            this.caseFormDialogVisible = true
        },
        /* 重置查询表单 */
        resetQueryForm() {
            this.userid = ''
            this.$refs.queryForm.resetFields()
        },
    },
};
</script>

<style scoped>

</style>